<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!-- <img :src="imgUrl" alt="" srcset="">
    <img src="~assets/logo.png"> -->
    <!-- <a href="javascript:;" @click="downloadFile('sss')">
        <img src="~assets/logo.png"/>
    </a> -->
     <!-- <a href="javascript:;" @click="ddd()">
        <img src="~assets/logo.png"/>
    </a> -->
    <a href="~assets/logo.png">
        <img src="~assets/logo.png"/>
    </a>
    <Test></Test>

  </div>
</template>
<script>
// import imgUrl from "assets/logo.png"
const imgUrl = require("assets/logo.png")
export default {
//    if (!(/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/.test(value))) {
 // if (!(/^1[34578]\d{9}$/.test(value)) && !(/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,4}))?$/.test(value))) {
    data() {
        return {
            imgUrl:imgUrl
            // imgUrl:require('assets/logo.png')
        }
    },
    methods:{
        downloadFile(fileName){
            var x = new XMLHttpRequest();
            let url = this.imgUrl
            x.open("GET", url, true);
            x.responseType = 'blob';
            x.onload=function(e) {
            var url = window.URL.createObjectURL(x.response)
            var a = document.createElement('a');
            a.href = url
            a.download = fileName;
            a.click()
            }
            x.send();
        },
        ddd(){
        console.log(22222)
        // 创建隐藏的可下载链接  
        // let  blob = 'http://pic.c-ctrip.com/VacationH5Pic/mice/wechat/ewm01.png';
        // var a = document.createElement('a');
        // a.style.display = 'none';
        // a.href = blob;        
        // a.download = 'QRcode.jpg';
        // document.body.appendChild(a);
        // a.click();
        // //移除元素
        // document.body.removeChild(a);
        //canvans下载
  		let src = this.imgUrl;
//      let src = 'https://www.baidu.com/img/flexible/logo/pc/result.png';
        var canvas = document.createElement('canvas');
        var img = document.createElement('img');
        img.onload = function(e) {
            canvas.width = img.width;
            canvas.height = img.height;
            var context = canvas.getContext('2d');
            context.drawImage(img, 0, 0, img.width, img.height);
            // window.navigator.msSaveBlob(canvas.msToBlob(),'image.jpg');
            // saveAs(imageDataUrl, '附件');
            canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
            canvas.toBlob((blob)=>{
                let link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = 'aaa'; 
                link.click();  
            }, "image/jpeg");
            // context.toBlob(function(blob) {
            // console.log('blob :', blob);
            
 
            // let link = document.createElement('a');
            // link.href = window.URL.createObjectURL(blob);
            // link.download = 'aaa';
            // }, "image/jpeg");
        }
        img.setAttribute("crossOrigin",'Anonymous');
        img.src = src;
    }
    }
}
</script>